<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <!--{include file="comm_header.tpl"}-->
</head>
<body ontouchstart style="background: #ebebeb;">
<div class="container" id="container">
    <div class="page" style="margin-bottom: 45px">
        <!--details-->
        <div class="weui-form-preview" style="margin-top: 0">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">销售单号：</span><!--{$saleInfo->saleCode}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">项目名称：</span><!--{$saleInfo->saleName}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">预计完成日期：</span><!--{$saleInfo->requestDate}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">涂装体系：</span><!--{$saleInfo->categoryName}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">施工面积：</span><!--{$saleInfo->area}-->平米</label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item weui_describe">
                    <label class="weui-form-preview__label"><span class="text-gray">客户要求：</span></label>
                    <p><!--{$saleInfo->request}--></p>
                </div>
                <!--{if $saleInfo->saleStatus>=4}-->
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">物流方式：</span>快递，<!--{$saleInfo->sendTypeName}-->，<!--{$saleInfo->expressNum}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <!--{/if}-->
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">收&ensp;货&ensp;人：</span><!--{$saleInfo->receiver}-->，<!--{$saleInfo->receivMobile}--></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item weui_describe">
                    <label class="weui-form-preview__label"><span class="text-gray">地&emsp;&emsp;址：</span></label>
                    <p><!--{$saleInfo->provinceName}--><!--{$saleInfo->cityName}--><!--{$saleInfo->countyName}--><!--{$saleInfo->address}--></p>
                </div>
            </div>
            <div class="weui-form-preview__ft">
                <div class="flex-box">
                    <div class="weui-flex flow-box">

                        <div class="weui-flex__item <!--{if $saleInfo->saleStatus >0}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-pickup"></i><p>已审核</p></div>
                        <div class="weui-flex__item"><i class="icon iconfont icon-line"></i></div>
                        <div class="weui-flex__item <!--{if $saleInfo->saleStatus >1}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-making"></i><p>生产</p></div>
                        <div class="weui-flex__item"><i class="icon iconfont icon-line"></i></div>
                        <div class="weui-flex__item <!--{if $saleInfo->saleStatus >2}-->weui-flex__item_on<!--{/if}-->"><i class="icon iconfont icon-transport"></i><p>发货</p></div>
                    </div>
                </div>
            </div>
        </div>

        <!--list-->
        <!--{if isset($saleInfo->dtl)}-->
        <!--{foreach from=$saleInfo->dtl item=saleDtl}-->
        <div class="weui-form-preview weui-details-list">
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-blue">产品系列：<!--{$saleDtl->categoryName}--></span></label>
                    <span class="weui-form-preview__value"></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">产品名称：</span><!--{$saleDtl->goodsName}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">单价：</span><!--{number_format($saleDtl->price + $saleDtl->beatingCost,2)}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">颜色：</span><!--{$saleDtl->color}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">对色标准：</span><!--{$saleDtl->colorDis}--></span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label"><span class="text-gray">数量：</span><!--{$saleDtl->amount}--></label>
                    <span class="weui-form-preview__value"><span class="text-gray">包装规格：</span><!--{$saleDtl->specName}-->/<!--{$saleDtl->packageName}--></span>
                </div>
            </div>

            <!--{if $user['type'] == 0 && $saleInfo->saleStatus > 1}-->
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell" style="padding-left: 30px;">
                    <div class="weui-cell__bd">
                        <div class="weui-uploader">
                            <div class="weui-uploader__hd">
                                <p class="weui-uploader__title">图片上传</p>
                                <div class="weui-uploader__info">0/2</div>
                            </div>
                            <div class="weui-uploader__bd" name="uploader" gId="<!--{$saleDtl->goodsId}-->">
                                <ul class="weui-uploader__files">
                                    <!--{if isset($saleDtl->annex)}-->
                                    <!--{if $saleInfo->saleStatus != 3}-->
                                        <!--{foreach from=$saleDtl->annex item=file}-->
                                        <li class="weui-uploader__file">
                                            <img style="width: 79px;height: 79px;" src="<!--{$file->path}-->" />
                                        </li>
                                        <!--{/foreach}-->
                                    <!--{/if}-->
                                    <!--{/if}-->
                                </ul>
                                <!--{if $saleInfo->saleStatus == 3}-->
                                <div class="weui-uploader__input-box">
                                    <input class="weui-uploader__input" type="button" />
                                </div>
                                <!--{/if}-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--{/if}-->

        </div>
        <!--{/foreach}-->
        <!--{/if}-->
        <!--list end-->
    </div>
    <div class="weui-footer weui-footer_fixed-bottom">
        <a href="tel:0573-86773577" class="weui-btn weui-btn_primary">联系客服</a>
        <!--{if $user['type'] != 0}-->
        <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_disabled">确认收货</a>
        <!--{else}-->
            <!--{if $saleInfo->saleStatus == 3}-->
            <a href="javascript:saleDeliver();" class="weui-btn weui-btn_warn">确认收货</a>
            <!--{else}-->
            <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_disabled">确认收货</a>
            <!--{/if}-->
        <!--{/if}-->
    </div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--{include file="comm_js.tpl"}-->

<script type="text/javascript">
    var num = 0, data = {};
    wx.config({
        debug: false,
        appId: '<!--{$signPackage["appId"]}-->',
        timestamp: <!--{$signPackage["timestamp"]}-->,
        nonceStr: '<!--{$signPackage["nonceStr"]}-->',
        signature: '<!--{$signPackage["signature"]}-->',
        jsApiList: [
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage'
        ]
    });
    $(function(){
        $('.weui-navbar__item').on('click', function () {
            var _this=$(this).index()
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__content").eq(_this).show().siblings('.weui-tab__content').hide()
        });
    });

    //微信上传图片
    wx.ready(function(){

        //上传选择图片
        $('div[name=uploader]').on('click', 'input[type=button]', function () {
            var _this = this,
                _ul =  $(_this).parent().prev(),
                _div = $(this).parents('div[name=uploader]'),
                gId = _div.attr('gId');

            wx.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],   // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],        // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    if(_ul.find('li').length == 5){
                        E.wxAlert('每个系列只能上产5张图片');
                        return;
                    }

                    if(!data[gId]) data[gId] = {};

                    //返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    var localIds = res.localIds;
                    $.each(localIds, function(i,v) {
                        var Nnum = 'NEW' + num;
                        $(_this).parent().prev().append('<li class="weui-uploader__file"><img style="width: 79px;height: 79px;" src="'+ v +'" /><del num="'+ Nnum +'">&times;</del></li>');
                        wxuploadImage(gId, Nnum, v.toString());
                        num++;
                    })
                }
            });
        });

        //预览图片
        $('div[name=uploader]').on('click', 'ul li img', function () {
            var currUrl = $(this).attr('src');
            wx.ready(function(){
                wx.previewImage({
                    current: currUrl,
                    urls: [ currUrl ]
                });
            });
        });

        //删除图片
        $('div[name=uploader]').on("click", "ul li del", function(){
            var _div = $(this).parents('div[name=uploader]'),
                gId = _div.attr('gId'),
                currNum = $(this).attr('num');

            //删除数组
            if(data[gId] && data[gId][currNum]){
                delete data[gId][currNum];
            } else {
                if(!data[gId]) data[gId] = [];
                data[gId][currNum] = 0;
            }
            $(this).parent().remove();
        })
    });

    //上传文件到wx服务器
    function wxuploadImage(gId, num, tempId) {
        console.log('上传ID' + tempId);
        wx.uploadImage({
            localId: tempId,
            isShowProgressTips: 0,
            success: function (res) {
                data[gId][num] = res.serverId
                console.log('上传成功：'+ res.serverId );
            },
            fail: function (error) {
                console.log('上传失败：'+ error.errMsg );
            }
        });
    }

    <!--{if $saleInfo && $saleInfo->saleStatus == 3}-->
    function saleDeliver() {
        //检查图片
        var flg = 0;
        $('div[name=uploader]').each(function () {
            if(!$(this).find('img').length){
                flg = 1;
                return false;
            }
        });
        if(flg) {
            E.wxAlert('请上传系列图片');
            return;
        }
        E.ajax_post({
            url : "/wap/orderDtl.html?ajaxFlg=8&code=<!--{$saleInfo->saleCode}-->",
            data: { files: data },
            call : function (o) {
                E.wxAlert(o.message, function () {
                    if(o.code == 200){
                        //location.href = '/wap/order.html?flg=1';
                        location.reload();
                    }
                } , 1)
            }
        });
    }
    <!--{/if}-->

</script>
</body>
</html>
